<template>
  <div class="statisPage">
     <div class="page-top">
       <div class="modular-left modular-box">
         <h4 class="modular-title"><span>实时联网统计</span></h4>
         <div class="modular-content">
           <div class="current-time-wrap">
             <span><i class="el-icon-time"></i> 当前时间：{{ currentTime }}</span>
             <span class="real-data-btn link-btn">实时数据 >></span>
           </div>
           <div class="real-chart-wrap">
             <div id="real-time-data"></div>
             <ul class="real-time-list">
               <li>点位总数：100</li>
               <li>当前联网率</li>
               <li><i class="on-line"></i> 在线：95</li>
               <li><i class="outage-icon"></i> 申请停运：2</li>
               <li><i class="abnormal-icon"></i> 异常掉线：3</li>
             </ul>
           </div>
           <p class="analysis-text">
             联网异常：<span class="text">有3个主要是X区（1个）、y区（1个）、z区（1个）、x运营商（2）个</span>
           </p>
           <p class="analysis-text">
             申请停运：<span class="text">有2个主要是X区（1个）、y区（1个）、x运营商（2）个</span>
           </p>
         </div>
       </div>
       <div class="modular-right modular-box">
         <h4 class="modular-title"><span>联网异常统计</span></h4>
         <div class="modular-content scrollSpecial">
            <el-scrollbar style="height: 100%">
              <ul class="abnormal-list">
                <li v-for="(item,index) in abnormalList" :key="index">
                  <div class="list-head">
                    <i class="state-icon"></i>
                    <span class="name">{{ item.name }}</span>
                    <span class="state-t" v-if="item.state === 1">停运</span>
                    <span class="state-y" v-if="item.state === 2">异常</span>
                    <div class="line-wrap">
                      <a href="javascript:;" class="link-btn">历史数据 >></a>
                      <a href="javascript:;" class="link-btn">生成任务 >></a>
                    </div>
                  </div>
                  <el-row>
                    <el-col :span="10"><span>开始时间：{{ item.startTime }}</span></el-col>
                    <el-col :span="7"><span>今日联网率：{{ item.networkingRate }}%</span></el-col>
                    <el-col :span="7"><span>运维：</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="10"><span>持续时长：{{ item.duration }}</span></el-col>
                    <el-col :span="7">
                      <div style="width: 80%;padding-top: 10px;">
                        <el-progress :percentage="item.networkingRate"  :show-text="false"></el-progress>
                      </div>
                    </el-col>
                    <el-col :span="7">{{ item.personnel }}</el-col>
                  </el-row>
                </li>
              </ul>
            </el-scrollbar>
         </div>
       </div>
     </div>
     <div class="page-bottom">
       <div class="modular-left modular-box">
         <h4 class="modular-title"><span>实时联网率地图</span></h4>
         <div class="modular-content">
           <networking-map></networking-map>
         </div>
       </div>
       <div class="modular-right modular-box">
         <h4 class="modular-title"><span>联网率排名</span></h4>
         <div class="modular-content">
            <div class="ranking-toolbar clearfix">
              <div class="ranking-classify-group clearfix">
                <i class="active-line"></i>
                <div class="item"
                     :class="{active:classifyActive === index}"
                     v-for="(item,index) in classifyList"
                     :key="index"
                     @click="toggleClassify(item,index,$event)"
                >{{ item.label }}</div>
                <!--<div class="item">运营商</div>
                <div class="item">站点</div>-->
              </div>
              <ul class="time-type-group">
                <li v-for="(item,index) in timeType"
                    :class="{active:timeActive === index}"
                    @click="toggleTimeType(item,index)"
                    :key="index">
                  {{ item.label }}
                </li>
              </ul>
            </div>
            <div id="networking-rank" class="networking-rank"></div>
         </div>
       </div>
     </div>
   </div>
</template>

<script>
  import networkingMap from './networkingMap.vue';
export default {
  name: "",
  components:{
    networkingMap
  },
  data() {
    return {
      currentTime: new Date().format('yyyy-MM-dd hh:mm:ss'),
      currentTimer:null,//当前时间定时器
      abnormalList:[{
        id:'1',
        name:'生米',
        state:1,
        startTime:'2019-01-01 08:00:00',
        networkingRate:96,
        personnel:'吴境（宇星）',
        duration:'10天10小时10分钟10秒',
      },{
        id:'1',
        name:'橘子洲',
        state:2,
        startTime:'2019-01-01 08:00:00',
        networkingRate:86,
        personnel:'吴境（宇星）',
        duration:'10天10小时10分钟10秒',
      },{
        id:'3',
        name:'捞刀河',
        state:1,
        startTime:'2019-01-01 08:00:00',
        networkingRate:76,
        personnel:'吴境（宇星）',
        duration:'10天10小时10分钟10秒',
      }],
      classifyList:[{
        value:1,
        label:'地区'
      },{
        value:2,
        label:'运营商'
      },{
        value:3,
        label:'站点'
      }],
      classifyActive:0,
      timeType:[{
        value:'d',
        label:'当前',
      },{
        value:'j',
        label:'今日',
      },{
        value:'w',
        label:'本周',
      },{
        value:'m',
        label:'本月',
      },{
        value:'q',
        label:'本季度',
      }],
      timeActive:0,

    };
  },
  methods:{
    /* 实时联网统计环形图表创建 */
    createRealTimeData(){
      let myChart = this.$echarts.init(document.getElementById('real-time-data'));
      let option = {
        color:['#15c215','#d1def0','#ff3333'],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['55%', '70%'],
            center:['60%','50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter:'{a|{d}}{b|%}\n{c|{b}}',
                rich:{
                  a:{
                    fontSize:24,
                    fontWeight:700,
                  },
                  b:{
                    fontSize: 16
                  },
                  c:{
                    color: '#666',
                    fontSize: 14,
                    lineHeight: 20
                  }

                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },

            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:93, name:'正常'},
              {value:12, name:'申请停运'},
              {value:23, name:'异常掉线'},
            ]
          }
        ]
      };
      myChart.setOption(option);
      //初始化让第一块高亮显示
      myChart.dispatchAction({
        type:'highlight',
        seriesIndex:0,
        dataIndex:0
      });
      myChart.on('mouseover',function(params){
        myChart.dispatchAction({
          type:'downplay',
          seriesIndex:0,
        });
        myChart.dispatchAction({
          type:'highlight',
          seriesIndex:0,
          dataIndex:params.dataIndex
        });
      });
      myChart.on('mouseout',function(params){
        myChart.dispatchAction({
          type:'highlight',
          seriesIndex:0,
          dataIndex:params.dataIndex
        });
      });
    },
    /* 点击按钮组切换地区、运营商、站点 */
    toggleClassify(item,index,event){
      let ele = event.currentTarget;//获取当前点击元素
      let patent = ele.parentNode;//获取当前点击元素父级元素
      let line = patent.querySelector('.active-line');//根据父级元素获取第一个子元素
      line.style.left = ele.offsetLeft+'px';
      line.style.width = ele.offsetWidth+'px';
      this.classifyActive = index;
    },
    /* 点击按钮组，切换时间类型 */
    toggleTimeType(item,index){
      this.timeActive = index;
    },
    /* 联网率排名图表创建 */
    createNetworkingRank(){
      let myChart = this.$echarts.init(document.getElementById('networking-rank'));
      let option = {
        dataZoom: [
          {
            type: 'slider',
            filterMode: 'empty',
            start: 0,
            end: 100,
          },
          {
            type: 'inside',
            filterMode: 'empty',
            start: 0,
            end: 100,
          },
        ],
        grid:{
          top: 20,
          left: 60,
          right: 30,
          bottom: 70
        },
        xAxis: {
          type: 'category',
          data: ['内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖南', '湖北'],
          axisTick:{
            show:false
          },
          axisLabel: {
            color: '#666'
          },
          axisLine:{
            lineStyle:{
              color: '#c6d1de'
            }
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLabel: {
            formatter: '{value} %',
            color: '#666'
          },
          axisTick:{
            show:false,
          },
          axisLine:{
            lineStyle:{
              color: '#c6d1de'
            }
          }
        },
        series: [{
          data: [100, 90, 80, 76, 70, 68, 60,57,56,51,49,47,45,42,40,36,34,33,32,30],
          type: 'bar',
          barWidth: 20,
          itemStyle:{
            color:function(params){
              // console.log(params);
              let color = '';
              switch (params.dataIndex) {
                case 0:
                  color = '#15c215';
                  break;
                case 1:
                  color = '#1dc41d';
                  break;
                case 2:
                  color = '#68d868';
                  break;
                default:
                  color = '#70d970';
              }

              return color;
            }
          }
        }]
      };
      myChart.setOption(option);
    }
  },
  computed:{
    showleftTree(){
        return this.$store.state.showleftTree;
    }
  },
  watch:{
    showleftTree(val){
      let myChart = this.$echarts.init(document.getElementById('networking-rank'));
      setTimeout(()=>{
        myChart.resize();
      },300);

    }
  },
  mounted(){
    this.createRealTimeData();

    setTimeout(()=>{
      this.createNetworkingRank();
    },300);

  },
  created() {
    this.$store.commit("setShowlefttree", false);

    //当前时间定时器
    this.currentTimer = setInterval(()=>{
      this.currentTime = new Date().format('yyyy-MM-dd hh:mm:ss');
    },100);
  },
  beforeDestroy(){
    //页面销毁前清除当前时间定时器
    clearInterval(this.currentTimer);
  },
};
</script>

<style scoped lang="less">
.statisPage {
  /*padding: 8px;*/
  height: 100%;
  .page-top{
    height: calc(52% - 8px);
    margin-bottom: 8px;
  }
  .page-bottom{
    height: 48%;
  }
  .modular-left{
    width: 34%;
    height: 100%;
    float: left;
  }
  .modular-right{
    width: calc(66% - 8px);
    height: 100%;
    margin-left: 8px;
    float: left;
  }
  /* 模块样式 */
  .modular-box{
    border: 1px solid #dce9fa;
    overflow: hidden;
    .modular-title{
      height: 37px;
      line-height: 36px;
      padding-left: 12px;
      border-bottom: 1px solid #dce9fa;
      span{
        color: #666666;
        font-size: 12px;
      }
    }
    .modular-title:before{
      content:'';
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: 3px;
      height: 10px;
      background: #166bce;
      margin-right: 6px;
    }
    .modular-content{
      height: calc(100% - 37px);
      /* 实时联网统计当前时间样式 */
      .current-time-wrap{
        padding: 12px;
        color: #666666;
        line-height: 20px;
        .el-icon-time{
          color: #166bce;
          font-size: 18px;
          vertical-align: middle;
          margin-bottom: 3px;
        }
      }
      /* 实时联网统计图表与图例样式 */
      .real-chart-wrap{
        height: calc(100% - 144px);
        position: relative;
        #real-time-data{
          width: 50%;
          height: 100%;
          float: left;
        }
        .real-time-list{
          position: absolute;
          left: 55%;
          top: 50%;
          line-height: 24px;
          margin-top: -60px;
          color: #666666;
          .on-line,.outage-icon,.abnormal-icon{
            display: inline-block;
            width: 10px;
            height: 8px;
            margin-right: 8px;
            background: #d1def0;
          }
          .on-line{
            background: #15c215;
          }
          .abnormal-icon{
            background: #ff3333;
          }
        }
      }
      /* 实时联网统计分析文字样式 */
      .analysis-text{
        padding: 0 8px 0 26px;
        color: #747474;
        line-height: 24px;
        background: url("../../assets/images/list-icon.png") no-repeat 8px 5px ;
        &>.text{
          display: inline-block;
          width: calc(100% - 68px);
          vertical-align: top;
        }
      }
      /*联网异常统计 列表样式*/
      .abnormal-list{
        padding: 0 12px;
        &>li{
          padding: 14px 0;
          border-bottom: 1px solid #dce9fa;
        }
        &>li:last-child{
          border-bottom: none;
        }
        .state-icon{
          display: inline-block;
          width: 20px;
          height: 29px;
          vertical-align: middle;
          margin-bottom: 8px;
          margin-right: 5px;
          background: url("../../assets/images/state-icon.png") no-repeat ;
        }
        .name{
          font-weight: 700;
          font-size: 16px;
        }
        .state-t,.state-y{
          display: inline-block;
          padding: 2px 6px;
          vertical-align: middle;
          margin-bottom: 10px;
          border-radius: 7px 7px 7px 0;
          color: #fff;
          font-size: 12px;
        }
        .state-t{
          background: #ff7e00;
        }
        .state-y{
          background: #ff3333;
        }
        .line-wrap{
          float: right;
          margin-right: 20px;
          a{
            margin-left: 24px;
          }
        }
        .el-row{
          padding: 0 30px;
          color: #666666;
          line-height: 24px;
        }
      }
    }
  }
}
  .real-data-btn{
    float: right;
  }

  #networking-map{
    height: 100%;
    width: 100%;
  }
  .ranking-classify-group{
    padding: 12px;
    position: relative;
    float: left;
    .item{
      padding: 6px 14px;
      float: left;
      cursor: pointer;
      color: #666666;
    }
    .active-line{
      position: absolute;
      left: 12px;
      bottom: 12px;
      width: 54px;
      height: 2px;
      background: #166bce;
      transition: 0.3s;
    }
    .item.active{
      color: #166bce;
    }
  }
  .time-type-group{
    float: right;
    padding: 12px;
    &>li{
      float: left;
      padding: 6px 10px;
      cursor: pointer;
      border: 1px solid transparent;
    }
    &>li:hover{
      color: #166bce;
    }
    &>li.active{
      border: 1px solid #166bce;
      color: #166bce;
    }
  }
  .networking-rank{
    height: calc(100% - 57px);
  }
</style>
